import {Text, View, Image, ScrollView,Button} from '@tarojs/components'
import Taro from '@tarojs/taro';
import {connect} from '@tarojs/redux';
import {AtTabs, AtTabsPane} from 'taro-ui';
import {request, unite} from "../../../utils/index";
import './classroomDetailNext.scss';

import SelectList from "../../../components/select-list/selectList";
import AddShop from "../../../asset/images/add_shop.png";
import SjIcon from "../../../asset/images/sj_icon.png";
import Address from "../../../asset/images/address_icon.png";
import DtIcon from "../../../asset/images/dt_icon.png";
import none from "../../../asset/images/none.png";
import AiIn from "../../../asset/images/ai_in.png";
import Ai from "../../../asset/images/ai.png";
import Fb from "../../../asset/images/fb.png";
import CanIn from "../../../asset/images/can_in.png";
import Can from "../../../asset/images/can.png";

class ClassroomDetail extends Taro.Component {
    config = {
        navigationBarTitleText: '教室详情',
        navigationBarBackgroundColor: '#ffffff',
        // enablePullDownRefresh: true
    };

    state = {
        selectData: ['课程', '教练', '动态'],
        type: 1, // 1课程  2教练  2动态
        classDate: '', //时间
        detailDate: [], //数据接口
        listData: [],
        classTypeId: -1, //课程类型ID
        typeNameWrap: [],

        current: 0,
    };

    temp = {
        loading: false //防止多次点击
    };

    componentDidMount() {
        const {setClassDate, getData} = this.props;
        const option = this.$router.params;
        this.setState({
            typeNameWrap: getData.classTypes,
            classDate: setClassDate,
            type: option.type || 1, // 1课程  2教练  3动态
        }, () => {
            this.getDetail();
            if (option.type == 2) { //教练
                this.trainList();
            } else if (option.type == 3) { //3动态
                this.trendsList()
            }
        })
    };

    //切换
    skipSelectIx = (ix) => {
        this.setState({
            type: ix
        }, () => {
            if (ix == 1) { //1课程
                this.getDetail();
            } else if (ix == 2) { //2教练
                this.trainList();
            } else if (ix == 3) { //3动态
                this.trendsList()
            }
        })
    };

    //类型选择
    onChangeType = (name, res) => {
        const {typeNameWrap} = this.state;
        let nameType = '';
        let nameId = '';
        if(name == 'typeName') {
            nameType = typeNameWrap[res].classTypeName;
            nameId = typeNameWrap[res].classTypeID;
            this.setState({
                // typeName: nameType,
                classTypeId: nameId,
            }, () => {
                this.getList();
            });
        }
    };

    //获取课程列表
    getDetail = () => {
        const {classDate, type} = this.state;
        const params = {
            url: '/wx/firstPage/getRoomDetail',
            data:{
                classDate,
                roomId: this.$router.params.id
            }
        };
        request(params).then(res => {
            if (res) {
                if(res.code == 200) {
                    if (res && res.data) {
                        this.setState({
                            detailDate: res.data,
                        })
                        if (type == 1) {
                            this.setState({
                                listData: res.data.hotClasses
                            })
                        }
                    }
                }
            }
        })
    };

    //2教练列表
    trainList = () => {
        const params = {
            url: '/wx/coach/queryCoachListByRoom',
            data:{
                roomId: this.$router.params.id,
            }
        };
        request(params).then(res => {
            if (res) {
                if(res.code == 200) {
                    if (res && res.data) {
                        this.setState({
                            listData: res.data,
                        })
                    }
                }
            }
        })
    };

    //3动态列表
    trendsList = () => {
        const params = {
            url: '/momments/listMomentsByRoom',
            data:{
                roomId: this.$router.params.id,
            }
        };
        request(params).then(res => {
            if (res) {
                if(res.code == 200) {
                    if (res && res.data) {
                        this.setState({
                            listData: res.data,
                        })
                    }
                }
            }
        })
    };

    getTimers = (time, index) => {
        this.setState({
            classDate: time,
            current: index,
        }, () => {
            this.getDetail() //获取教练列表
        });
    };

    //教室收藏 教室收藏
    collect = () => {
        const {detailDate} = this.state;
        if (detailDate.collectionStatus == 0) {
            const params = {
                url: '/wx/collection/save',
                data:{
                    collectionTypeCode: '03', //收藏类型编码 （01 课程收藏、02 教练收藏、03 教室好收藏）
                    relateKeyId: detailDate.roomId,
                }
            };
            request(params).then(res => {
                if (res) {
                    if(res.code == 200) {
                        unite.showToast('收藏成功');
                        this.getDetail() //获取教室列表
                    }
                }
            })
        } else {
            const params = {
                url: '/wx/collection/deleteById',
                data:{
                    collectionTypeCode: '03', //收藏类型编码 （01 课程收藏、02 教练收藏、03 教室好收藏）
                    relateKeyId: detailDate.roomId,
                }
            };
            request(params).then(res => {
                if (res) {
                    if(res.code == 200) {
                        unite.showToast('已取消收藏');
                        this.getDetail() //获取教室列表
                    }
                }
            })
        }
    };

    //跳转课程详情
    skipCourseDetail = (classId, dispatchId) => {
        Taro.navigateTo({
            url: '../course-detail/courseDetail?classId=' + classId + '&dispatchId=' + dispatchId,
        })
    };

    //跳转教练详情
    skipTrainDetail = (id) => {
        Taro.navigateTo({
            url: '../train-detail/trainDetail?id=' + id
        })
    };

    //跳转动态详情
    skipDetails = (id, dtId) => {
        //id 课程id dtId 动态id
        Taro.navigateTo({
            url: `../../home/detail/detail?id=${id}&dtId=${dtId}`
        })
    };

    tabsClick = (is) => {
        const {getData} = this.props;
        let timer = getData.weekDays;
        this.setState({
            current: is,
            classDate: timer[is].classDate
        }, () => {
            this.getDetail();
        });
    };

    //跳转导航
    skipDaohang = () => {
        const {detailDate} = this.state;
        if (Number(detailDate.latitude) && Number(detailDate.longitude)) {
            Taro.openLocation({
                latitude: Number(detailDate.latitude),
                longitude: Number(detailDate.longitude),
                name: detailDate.roomName,
                address: detailDate.address
            })
        } else {
            unite.showToast('该店铺暂无经纬度');
        }
    };

    //锚点跳转
    skipPageScro = () => {
        Taro.pageScrollTo({
            selector: '#buyNote',
            duration: 300
        })
    };

    render() {
        const {detailDate, listData, current, classDate, selectData, type, typeNameWrap, classTypeId} = this.state;
        const {getData} = this.props;
        return (
            <View className="page">
                <View className="course-logo">
                    <Image className="keep-head-img" src={detailDate.avatar}/>
                    <Image className="head-ai" onClick={this.collect} src={detailDate.collectionStatus != 0 ? AiIn : Ai} mode="aspectFit"/>
                    <Button className="head-fb"  open-type="share">
                        <Image className="head-fb-img" src={Fb} onClick={this.onShareAppMessage} mode="aspectFit"/>
                    </Button>
                </View>
                <View className="course-head">
                    <View className="select-items-wrap flex-lr">
                        {selectData && selectData.length != 0 && selectData.map((item, index) => (
                            <View className={`items-list ${(index+1) == type ? 'items-list-avtive' : ''}`} onClick={this.skipSelectIx.bind(this, (index+1))} key={index}>
                                <View>{item}</View>
                                <View className="heng"></View>
                            </View>
                        ))}
                    </View>
                    {/*课程*/}
                    {type == 1 &&(
                        <View className="classroom-content-wrap">
                            <View className="shop-sort-bottom">
                                <ScrollView
                                    className='scrollview'
                                    scrollX
                                    scrollLeft
                                    scrollWithAnimation
                                >
                                    <SelectList onTimer={this.getTimers} getClassDate={classDate}/>
                                </ScrollView>
                            </View>
                            <View className="shop-sort-shop">
                                {getData.weekDays && getData.weekDays.length != 0 &&(
                                    <AtTabs className="com-tabs" current={current} tabList={getData.weekDays} onClick={this.tabsClick.bind(this)}>
                                        {getData.length != 0 && getData.weekDays.map((va, ixs) => (
                                            <AtTabsPane current={current} key={ixs} index={ixs+1} >
                                                <ScrollView
                                                    className="content-view"
                                                    scrollY
                                                    upperThreshold={3}
                                                    scroll-with-animation
                                                    enhanced
                                                    show-scrollbar
                                                    paging-enabled
                                                    fast-deceleration
                                                    lowerThreshold={3}
                                                >
                                                    <View className="keep-content">
                                                        {listData && listData.length != 0 && listData.map((value, is) => (
                                                            <View className="keep-content-list-item flex-top-l" key={is} onClick={this.skipCourseDetail.bind(this, value.classId, value.dispatchId, value.reservedStatus)}>
                                                                <Image className="list-img" src={value.avatar}/>
                                                                <View className="list-centent-left-wrap">
                                                                    <View className="list-centent">
                                                                        <View className="name">{value.className}</View>
                                                                        <View className="timer">{value.classBeginTime}-{value.classEndTime} <Text className="text">￥{value.price}/节</Text></View>
                                                                        <View className="type flex-l">
                                                                            <View className="list-top-left flex-center">{value.reservedInfo}</View>
                                                                            {value.labelNames.map((items, indexs) => (
                                                                                <View className="kepp-gg flex-center" key={indexs}>{items}</View>
                                                                            ))}
                                                                        </View>
                                                                    </View>
                                                                    <View className={`list-right-bt ${value.reservedStatus == 0 ? '' : 'list-right-bt-ym'}`}>{value.reservedStatus == 0 ? '预约' : '已约满'}</View>
                                                                </View>
                                                            </View>
                                                        ))}
                                                        {(!listData || listData.length == 0) &&(
                                                            <View className="none">
                                                                <Image src={none}/>
                                                                <View>暂无数据</View>
                                                            </View>
                                                        )}
                                                    </View>
                                                </ScrollView>
                                            </AtTabsPane>
                                        ))}
                                    </AtTabs>
                                )}
                            </View>
                        </View>
                    )}
                {/*    教练*/}
                    {type == 2 &&(
                        <View className="classroom-content-wrap">
                            {/*<View className="leixin-list-wrap flex-lr">*/}
                            {/*    <View className="leixin-list">*/}
                            {/*        {typeNameWrap && typeNameWrap.length != 0 && typeNameWrap.map((item, index) => (*/}
                            {/*            <View className={`list-item ${(classTypeId == item.classTypeID) ? 'list-item-active' : ''}`} key={index} onClick={this.onChangeType.bind(this, 'typeName', index)}>*/}
                            {/*                /!*<Image className="leixin-item-img" src={classTypeId == item.classTypeID ? item.selectedAvatar : item.avatar}/>*!/*/}
                            {/*                <View className="leixin-item-name">{item.classTypeName}</View>*/}
                            {/*                <View className={`${(classTypeId == item.classTypeID) ? 'list-active-heng' : ''}`}></View>*/}
                            {/*            </View>*/}
                            {/*        ))}*/}
                            {/*    </View>*/}
                            {/*</View>*/}
                            <View className="keep-content-coach">
                                {listData && listData.length != 0 && listData.map((item, index) => (
                                    <View className="keep-content-lists"  key={index} onClick={this.skipTrainDetail.bind(this, item.coachId)}>
                                        <Image className="content-list-img" src={item.avatar} mode="widthFix"/>
                                        <View className="content-list-wraps">
                                            <View className="coach-name">{item.coachName}</View>
                                            <View className="coach-title text-overflow">{item.description}</View>
                                            <View className="coach-price flex-l">
                                                <View className="num">¥{item.price}</View>
                                                <View>/课时起 </View>
                                                <View className="line_m">¥{item.comparePrice}</View>
                                            </View>
                                        </View>
                                    </View>
                                ))}
                            </View>
                            {(!listData || listData.length == 0) &&(
                                <View className="none">
                                    <Image src={none}/>
                                    <View>暂无数据</View>
                                </View>
                            )}
                        </View>
                    )}
                    {/*    动态*/}
                    {type == 3 &&(
                        <View className="classroom-content-wrap">
                            <View className="home-list-content keep-content-coach flex-top">
                                {listData && listData.length != 0 && listData.map((item, index) => (
                                    <View className="home-list home-list-next" key={index} onClick={this.skipDetails.bind(this, item.dispatchId, item.momentId)}>
                                        <View className="img-ck">
                                            <Image className="imgs" src={item.imgs[0].imgUrl} mode="aspectFill"/>
                                        </View>
                                        <View className="home-details">
                                            <View className="home-name text-overflow-two">{item.title}</View>
                                            <View className="flex-lr detail-title">
                                                <View className="flex-l">
                                                    <Image className="heads" src={item.authorAvatar}/>
                                                    <View className="text-name text-overflow">{item.authorName}</View>
                                                </View>
                                                <View className="flex-r" onClick={this.isShouc.bind(this, item.isLike, item.momentId, index)}>
                                                    <Image className="cans" src={item.isLike == 1 ? CanIn : Can} mode="aspectFit"/>
                                                    <View>{item.likeCount}</View>
                                                </View>
                                            </View>
                                        </View>
                                    </View>
                                ))}
                                {(!listData || listData.length == 0) &&(
                                    <View className="none">
                                        <Image src={none}/>
                                        <View>暂无数据</View>
                                    </View>
                                )}
                            </View>
                        </View>
                    )}
                </View>
            </View>
        )
    }
}

const mapStateToProps = state => {
    let {setClassDate, getData} = state;
    return {
        setClassDate,
        getData,
    }
};

export default connect(mapStateToProps, null)(ClassroomDetail);

